<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>DataFlix</title>
	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<meta name="description" content="" />
	<meta name="language" content="en" />
	
	<link type="text/css" rel="stylesheet" href="./styles/fonts.css"/>
	<link type="text/css" rel="stylesheet" href="./styles/header.css"/>
	<link type="text/css" rel="stylesheet" href="./styles/fancybox.css"/>
	<link type="text/css" rel="stylesheet" href="./styles/movieImgs.css"/>
	
	<link type="text/css" rel="stylesheet" href="./styles/charcoal.css"/>
	<link type="text/css" rel="stylesheet" href="./styles/style.css"/>
	
	<link rel="shortcut icon" href="http://www.iconarchive.com/download/i59247/franksouza183/fs/Apps-firefox.ico"/>
	
</head>
<body>

	<div id="header">
		<a id="title" href="./index.html"><span class="actionClr">Da</span><span class="comedyClr">ta</span><span class="dramaClr">Fl</span><span class="foreignClr">ix</span></a>
		<ul>
			<li id="categories">
				<a href="./">Categories</a>
				<ul>
					<li id="catB"><a href="#Best">Best Selling</a></li>
					<li id="catC"><a href="#Comedy">Comedy</a></li>
					<li id="catD"><a href="#Drama">Drama</a></li>
					<li id="catA"><a href="#Action">Action</a></li>
					<li id="catF"><a href="#Foreign">Forgeign</a></li>
				</ul>
			</li>
			
			<li id="searchSlide">
				<form>
					<a href="./">Search</a>
					<input id="searchQur" />
				</form>
			</li>
			<f:view>
                        <h:form id="login_frm">
			<li id="logDrop"><a href="./">Sign In</a>	<!--replace with "My Account" once signed in-->
				<form id="loginFrm" method="post">
					<label>EMail Address<h:inputText id="username" value="#{login_bean.username}" required="true" styleClass="email"/></label>
					<label>Password<h:inputSecret id="password" value="#{login_bean.password}" required="true" styleClass="password"/></label>
					<!--a id="logBtn" onclick="" href="./">Sign In</a-->
                                        <h:commandButton action="#{login_bean.checkValidUser}" value="Login" type="submit">
                            
                                        </h:commandButton>
                                        
				</form>
			</li>	
                        </h:form>
                        </f:view>
			<li><a href="./">Register</a></li>
			<li><a href="./">Support</a></li>
		</ul>
	</div>
	
	
	<div id="featured">	
		<h1>Featured Film</h1>
		<!--<ul>
			<li id="feat0"><a href="./">Best Selling</a></li>
			<li><a href="./">Recommended</a></li>	<!--goes to sign in if not signed in->
			<br/>
			<li><a href="./">Comedy</a></li>
			<li><a href="./">Drama</a></li>
			<li><a href="./">Action</a></li>
			<li id="featF"><a href="./">Forgeign</a></li>
		</ul>-->
		
		<a class="fancyBox" id="UFO" href="./">
			<div class="overlay"><h1>Undefined Fantastic Object</h1></div>
		</a>
	</div>
	
	
	<div id="content">
		
		<!--put recommended here-->
		
		
		<ul class="contentRow" id="Best">
			<div class="angle"></div>
			<li class="rowTtl"><a href="./">Best Selling
				<div class="ttlOvr"></div>
			</a></li>
			
			<li><a class="fancyBox" href="./movie.html">
				<img id="scarlet"/>
				<div class="overlay">
					<h1>Embodiment of the Scarlet Devil</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="abara"/>
				<div class="overlay">
					<h1>Abara</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="baka"/>
				<div class="overlay">
					<h1>Great Fairy Wars</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="jorm"/>
				<div class="overlay">
					<h1>Jormungand</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art1"/>
				<div class="overlay">
					<h1>art1</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art2"/>
				<div class="overlay">
					<h1>art2</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
		
		</ul>
		
		<ul class="contentRow" id="Comedy">
			
			<li class="rowTtl"><a href="./">Comedy
				<div class="ttlOvr"></div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="art3"/>
				<div class="overlay">
					<h1>art3</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="art4"/>
				<div class="overlay">
					<h1>art4</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="art5"/>
				<div class="overlay">
					<h1>art5</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art6"/>
				<div class="overlay">
					<h1>art6</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art7"/>
				<div class="overlay">
					<h1>art7</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art8"/>
				<div class="overlay">
					<h1>art8</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
		
		</ul>
		
		<ul class="contentRow" id="Drama">
			
			<li class="rowTtl"><a href="./">Drama
				<div class="ttlOvr"></div>
			</a></li>
			
			<li><a class="fancyBox" href="https://en.wikipedia.org/wiki/Mystery_of_the_druids">
				<img id="DRUIDS"/>
				<div class="overlay">
					<h1>The Mystery of the Druids</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="eva"/>
				<div class="overlay">
					<h1>Evangelion</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="higur"/>
				<div class="overlay">
					<h1>When the Cicadas Cry</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art9"/>
				<div class="overlay">
					<h1>art9</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art10"/>
				<div class="overlay">
					<h1>art10</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art11"/>
				<div class="overlay">
					<h1>art11</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
		
		</ul>
		
		<ul class="contentRow" id="Action">
			
			<li class="rowTtl"><a href="./">Action
				<div class="ttlOvr"></div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="baka"/>
				<div class="overlay">
					<h1>Great Fairy Wars</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="Des"/>
				<div class="overlay">
					<h1>Demon's Souls</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="">
				<img id="jorm"/>
				<div class="overlay">
					<h1>Jormungand</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="abara"/>
				<div class="overlay">
					<h1>Abara</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art12"/>
				<div class="overlay">
					<h1>art12</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="">
				<img id="art13"/>
				<div class="overlay">
					<h1>art13</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
		
		</ul>
		
		<ul class="contentRow" id="Foreign">
			
			<li class="rowTtl"><a href="./">Foreign
				<div class="ttlOvr"></div>
			</a></li>
			
			<li><a class="fancyBox" href="./movie.html">
				<img id="scarlet"/>
				<div class="overlay">
					<h1>Embodiment of the Scarlet Devil</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper.
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="http://en.touhouwiki.net/wiki/Perfect_Cherry_Blossom">
				<img id="cherry"/>
				<div class="overlay">
					<h1>Perfect Cherry Blossom</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li><a class="fancyBox" href="http://en.touhouwiki.net/wiki/Imperishable_Night">
				<img id="night"/>
				<div class="overlay">
					<h1>Imperishable Night</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="http://en.touhouwiki.net/wiki/Mountain_of_Faith">
				<img id="mountain"/>
				<div class="overlay">
					<h1>Mountain of Faith</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="http://en.touhouwiki.net/wiki/Subterranean_Animism">
				<img id="animism"/>
				<div class="overlay">
					<h1>Subterranean Animism</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
			
			<li class="expLef"><a class="fancyBox" href="http://en.touhouwiki.net/wiki/Ten_Desires">
				<img id="desires"/>
				<div class="overlay">
					<h1>Ten Desires</h1>
					<div class="shortDesc">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa id leo volutpat dapibus. Vestibulum pulvinar, turpis a tristique laoreet, dui lorem aliquet purus, et semper dui est ullamcorper...
					</div>
				</div>
			</a></li>
		
		</ul>
		
	</div>
	
	<div id="footer"></div>

</body></html>